<template>
  <div class="ability-assessment mb-8">
    <div class="flex justify-center items-start w-full">
      <div ref="chartRef" :style="{ width: '100%', height: '360px' }"></div>
    </div>
    <div class="flex flex-row items-center justify-between px-4">
      <div class="flex flex-row items-center gap-2">
        <div class="w-[8px] h-[8px] bg-[#FF4D4F] rounded-full"></div>
        <span>60分以下</span>
      </div>
      <div class="flex flex-row items-center gap-2">
        <span class="w-[8px] h-[8px] bg-[#FA8C16] rounded-full"></span>
        <span>60 - 80分</span>
      </div>
      <div class="flex flex-row items-center gap-2">
        <span class="w-[8px] h-[8px] bg-[#436BFF] rounded-full"></span>
        <span>80 - 90分</span>
      </div>
      <div class="flex flex-row items-center gap-2">
        <span class="w-[8px] h-[8px] bg-[#52C41A] rounded-full"></span>
        <span>90分以上</span>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "CounsellingAbilityCard",

  props: {
    items: {
      type: Array,
      required: true,
      default: () => [
        { text: "需求挖掘", score: 80, max: 100 },
        { text: "需求挖掘2", score: 25, max: 100 },
        { text: "需求挖掘3", score: 65, max: 100 },
        { text: "需求挖掘4", score: 90, max: 100 },
        { text: "需求挖掘5", score: 10, max: 100 }
      ]
    }
  },

  data() {
    return {
      chart: null,
      backgroundColor: ""
    };
  },

  mounted() {
    this.initChart();
  },

  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose();
    }
  },

  methods: {
    test() {},
    initChart() {
      this.chart = echarts.init(this.$refs.chartRef);

      const option = {
        color: ["rgba(66, 107, 255, 0.50)"],
        radar: [
          {
            indicator: this.items.map(item => ({
              name: (
                item.text.trim().replace(/(.{3})/g, "$1\n") +
                "\n" +
                item.score +
                "分"
              ).replace(/\n\n/g, "\n"),
              max: item.max,
              color: this.getScoreColor(item.score)
            })),
            radius: 100,
            splitNumber: 5,
            shape: "circle",
            splitArea: {
              areaStyle: {}
            },
            axisLine: {
              lineStyle: {
                color: "rgba(233, 233, 233, 0.8)"
              }
            },
            splitLine: {
              lineStyle: {
                color: "rgba(233, 233, 233, 0.8)"
              }
            }
          }
        ],

        series: [
          {
            type: "radar",
            emphasis: {
              lineStyle: {
                width: 2
              }
            },
            data: [this.items.map(item => item.score)],
            areaStyle: {
              color: "rgba(67, 107, 255, 0.15)"
            }
          }
        ]
      };

      this.chart.setOption(option);
    },

    getScoreColor(score) {
      if (score >= 90) return "#52C41A";
      if (score >= 80) return "#4090FF";
      if (score >= 60) return "#FAAD14";
      return "#FF4D4F";
    }
  },

  watch: {
    items: {
      handler() {
        this.initChart();
      },
      deep: true
    }
  }
};
</script>

<style scoped>
.ability-assessment {
  display: inline-block;
  width: 100%;
}
</style>
